<template>
  <div class="recharge-wrapper">
    <div class="sdk-key-box">
      <input type="text"
             v-model="submitData.cdk"
             class="sdk-key-new"
             placeholder="在此填写购物卡卡密" />
      <div v-if="is_wx == 1"
           @click="handleClickScan"
           class="shopcard-scan"
           id="wechatQR">
        <i></i>
      </div>
    </div>
    <div class="shop-card">
      <button class="shopCard-btn red-gra-btn"
              @click="handleClickCharge">确认充值</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { isWeixinCient, isJSON } from '@/utils/validate'
import { shoppingCardRecharge } from '@/api/user/member/memberApi'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  name: 'index',
  components: {},
  data() {
    return {
      is_wx: 1,
      submitData: {
        cdk: ''
      }
    }
  },
  created() {
    this.isShowScan()
  },
  methods: {
    /**
     * 微信环境中展示扫码按钮
     */
    isShowScan() {
      this.is_wx = isWeixinCient() ? '1' : '0'
    },
    /**
     * 立即充值按钮事件
     */
    handleClickCharge() {
      if (!this.submitData.cdk) {
        this.$Error('请填写完整的购物卡卡密')
      } else {
        const param = Object.assign({}, this.submitData, true)
        shoppingCardRecharge(param).then(res => {
          if (res.status == 1) {
            this.$Error('充值成功')
            this.$emit('refreshList')
          } else {

            if(res.data.redirect_url!=''){
              openPage(res.data.redirect_url)
            }else{
              this.$Error(res.msg)
            }
          }
        })
      }
    },
    /**
     * 微信扫码
     */
    handleClickScan() {
        wx.scanCode({
          success: (res) => {
            // console.log(res)
            this.scanResutl(res)
          }
        })
    },
    /**
     * 处理扫码的结果
     */
    scanResutl(res) {
      const urlReg = /cdk\/([^\/]+)\/sid/i // sdk正则2
      const newUrlReg = /cdk=([^\/]+)&shop/i // sdk正则new
      // const str = 'http://m.wfx.wxfenxiao.com/User/recharge_list/cdk/01C-F77-E23-6CE-6F0/sid/6.html'
      // const str = 'http://m.wfx.wxfenxiao.com/mb/user/rechargeList?sid=6&cdk=448C9F9B-108B-95D8-A50F-821D9D58C4B5&shop_id=6&pid=6765'
      let urlResult
      let result
      if (process.env.isMiniprogram) {
        result = res.result
      } else {
        result = res.resultStr
      }

      // console.log(result, '扫码结果')
      if (result.indexOf('/mb') != -1) { // 老连接
        urlResult = result.match(newUrlReg)[1]
      } else if (result && isJSON(result)) {
        // 老的商城小程序的充值卡 {"cdk":"2F94E8D1-A6CB-CDF8-063A-0FC39A192F90"}
        const cdkTemp = JSON.parse(result)
        urlResult = cdkTemp.cdk
      } else { // vue链接
        urlResult = result.match(urlReg)[1]
      }
      
      this.submitData.cdk = urlResult
    }
  }
})
</script>

<style lang="scss">
.recharge-wrapper {
  margin-top: 20px;
  .sdk-key-box {
    background: #fff;
    padding: 20px 30px;
    position: relative;
    .sdk-key-new {
      height: 56px;
      width: 92%;
      color: #999999;
      font-size: 28px;
    }
  }
  .shop-card {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 13;
    width: 100%;
    padding: 10px 20px;
    text-align: center;
    background: #fff;
    .shopCard-btn {
      height: 80px;
      width: 100%;
      line-height: 80px;
      color: #fff;
      font-size: 32px;
      border-radius: 50px;
      border: 0;
      text-align: center;
    }
  }
  .shopcard-scan {
    position: absolute;
    top: 26px;
    right: 30px;
    border: 0;
    outline: 0;
    i {
      display: block;
      width: 40px;
      height: 40px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/user/recharge/wx_scan.png")
        no-repeat;
      background-size: 100%;
    }
  }
  .tc_box {
    background: #fff;
    padding: 20px 40px;
    width: 360px;
    position: relative;
    margin-left: -220px;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    border-radius: 26px;
    .icon {
      display: block;
      width: 172px;
      height: auto;
      margin: 16px auto;
    }
    .tip {
      padding: 10px 0;
      color: #888;
      text-align: center;
    }
  }
}
</style>
